<template>
  <div id="areaClassify" />
</template>

<script>
import * as echarts from 'echarts/core'
import { TooltipComponent, LegendComponent } from 'echarts/components'
import { PieChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'

import { getAreaClassifyData } from 'api/big-screen'
import resizeEcharts from '@/utils/resizeEcharts'

export default {
  name: 'MapAreaClassify',
  mixins: [resizeEcharts],
  props: {
    mapAttrs: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      isFirst: true,
      myChart: null,
      myChartOption: {
        color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: [],
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 5,
          bottom: '5%',
          textStyle: {
            color: 'rgba(255,255,255,.6)',
            fontSize: '12'
          }
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            selectedMode: 'single',
            radius: [30, '40%'],
            label: { show: false },
            labelLine: { show: false },
            // 扇形图不显示文字
            data: [],
            animation: true,
            animationType: 'scale', // 初始效果
            animationEasing: 'elasticOut', // 动画缓动效果
            animationTypeUpdate: 'linear', // 更新动画效果
            animationDurationUpdate: function(idx) {
              // 越往后的数据时长越大
              return idx * 10 + 1000
            }
          },
          {
            name: '访问来源',
            type: 'pie',
            radius: ['55%', '70%'], // 130, '60%'
            label: { show: false },
            labelLine: { show: false },
            data: []
          }
        ]
      }
    }
  },
  mounted() {
    echarts.use([
      TooltipComponent,
      LegendComponent,
      PieChart,
      CanvasRenderer
    ])
    let id = this.$props.mapAttrs.id
    this._getAreaClassifyData(id)
  },
  methods: {
    _getAreaClassifyData(id) {
      getAreaClassifyData(id).then(res => {
        let data = res
        if (this.isFirst === true) {
          this.initAreaClassify(data)
          this.isFirst = false
        } else {
          let option = this.myChartOption
          option.legend.data = data.map((item) => item.name)
          let [arrItem1, arrItem2, arrItem3, ...lastArr] = [...data]
          option.series[0].data = [arrItem1, arrItem2, arrItem3]
          option.series[1].data = lastArr
          this.myChart.setOption(option)
        }
      })
    },
    initAreaClassify(arr) {
      let chartDom = document.getElementById('areaClassify')
      this.myChart = echarts.init(chartDom)

      let nameArr = arr.map((item) => {
        return item.name
      })

      let [arrItem1, arrItem2, arrItem3, ...lastArr] = [...arr]

      this.myChartOption.legend.data = nameArr
      this.myChartOption.series[0].data = [arrItem1, arrItem2, arrItem3]
      this.myChartOption.series[1].data = lastArr

      this.myChart.setOption(this.myChartOption, true)
    }
  }
}
</script>

<style scoped>

</style>
